<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
      vertical-align: top;
    }
    .box{
      width: 1200px;
      height: 500px;
      margin: 100px auto;
      position: relative;
    }
    ul{
      height: 500px;
    }
    li{
      position: absolute;
    }
    img{
      width: 100%;
    }
    span{
      display: inline-block;
      width: 76px;
      height: 112px;
      background: url('images/prev.png');
      position: absolute;
      top: 100px;
      z-index: 1000;
      opacity: 0;
      cursor: pointer;
    }
    .r_btn{
      background-image: url('images/next.png');
      right:0px;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li><a href="javascript:;"><img src="images/slidepic1.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="images/slidepic2.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="images/slidepic3.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="images/slidepic4.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="images/slidepic5.jpg" alt=""></a></li>
    </ul>
    <div class="btns">
      <span class="l_btn"></span>
      <span class="r_btn"></span>
    </div>
  </div>
  <script src="../../jquery-1.12.4.min.js"></script>
  <script>
    var config = [
      {
        width:400,
        left:50,
        top:20,
        opacity:0.2,
        zIndex:2,
      },
      {
        width:600,
        left:0,
        top:70,
        opacity:0.8,
        zIndex:3,
      },
      {
        width:800,
        left:200,
        top:100,
        opacity:1,
        zIndex:4,
      },
      {
        width:600,
        left:600,
        top:70,
        opacity:0.8,
        zIndex:3,
      },
      {
        width:400,
        left:750,
        top:20,
        opacity:0.2,
        zIndex:2,
      }
    ]
    //初始页面样式
    var $lis = $('li');
    $lis.each(function(i,e){
      $(e).stop().animate(config[i]);
    });
    //鼠标进入大盒子，箭头按钮显示
    $('.box').mouseenter(function(){
      $('span').stop().animate({opacity:1});
    }).mouseleave(function(){
      $('span').stop().animate({opacity:0});
    });
    //点击左右按钮 图片位置发生改变
    $('.r_btn').click(function(){
      //点击右侧按钮 图片从前向后移动
      config.push(config.shift());
      //图片位置发生变化 重新遍历数组
      $lis.each(function(i,e){
        $(e).stop().animate(config[i]);
      });
    });
    $('.l_btn').click(function(){
      //点击左侧按钮 图片从后向前移动
      config.unshift(config.pop());
      //图片位置发生变化 重新遍历数组
      $lis.each(function(i,e){
        $(e).stop().animate(config[i]);
      });
    });
  </script>
</body>
</html>